import React, { useEffect, useState } from 'react'
import styles from './style.less'
import { Card, Input, message, Radio, Tag } from 'antd';
import { deleteQuestion } from '../service';
import qs from 'qs';
import { getAnswerTest } from '@/pages/teacher/course/service';


export type Props = {
    data: any;
    idx: number;
    questionResults?: any;
    testId?: any;
    studentId?: any
};

const Blanks: React.FC<Props> = (props) => {
    const { data, idx, questionResults, testId } = props
    const { content, questionId, answer } = data

    const questionContent = JSON.parse(content);

    const [values, setValues] = useState()

    // {
    //     answer ? "" : useEffect(() => {
    //         questionResults.splice(idx, 1, { questionId: questionId, result: "", testId: testId })
    //         console.log(questionResults, '不是会执行这里嘛');
    //     }, [])
    // }

    const onChanges = (e: any) => {
        setValues(e.target.value);
        questionResults?.splice(idx, 1, { questionId: questionId, result: e.target.value, testId: testId })
    }

    const deleteQuestions = async () => {
        const res = await deleteQuestion(qs.stringify({ questionIds: questionId, testId: testId }));
        if (res.code === 200) {
            message.success('删除成功')
        }
    }

    return (
        <>
            <Card>
                <Tag color="blue">{questionContent.title}</Tag>
                <span className={styles.title}>{`${idx + 1}、${questionContent.body}`}</span>
                {answer ? <span className={styles.testAnswer}><Tag color={'green'}>题目答案</Tag>：{answer}</span> : ''}
                {answer ? <span className={styles.testDeleteAnswer}><Tag color={'red'} onClick={() => deleteQuestions()}>删除题目</Tag></span> : ''}
                <li className={styles.answer}>
                    <Input placeholder="请按空格顺序输入，并使用 “；” 进行分割" value={values} onChange={onChanges} />
                </li>
            </Card>
        </>
    );
}

export default Blanks;
